<template>
    <div class="person-content">
        <div class="content-box">
            <h3>修改个人信息</h3>
            <div class="left" @mouseover="show_img = true" @mouseout="show_img = false">
                <div class="img-block">
                    <img :src="src" alt="img">
                    <input id="up-img" @change="changeImg" type="file" hidden>
                </div>
                    <div class="layout" @click="editImg" v-if="show_img">
                        修改头像
                    </div>
                </div>
                <div class="right">
                    <form @submit.prevent="onSubmit">
                        <div>
                            <label>姓名</label>
                            <input type="text" v-model="form.name" placeholder="请输入姓名">
                        </div>
                        <div class="mt32">
                            <label>用户名</label>
                            <input type="text" v-model="form.username" placeholder="请输入用户名">
                        </div>
                        <div class="mt32">
                            <label>性别</label>
                            <el-radio-group v-model="form.gender" class="mb32">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="2">女</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="mt32">
                            <label>生日</label>
                            <el-select v-model="form.year" class="year">
                                <el-option v-for="item in years" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                            <el-select v-model="form.month" class="month">
                                <el-option v-for="item in months" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="mt32">
                            <label>手机号码</label>
                            <input type="number" v-model="form.phone" placeholder="请输入手机号码">
                        </div>
                        <div class="mt32">
                            <label>电子邮箱</label>
                            <input type="text" v-model="form.email" placeholder="请输入电子邮箱">
                        </div>
                        <div class="mt32">
                            <label>所属机构</label>
                            <input type="text" placeholder="请输入所属机构">
                        </div>
                        <div class="mt32">
                            <label>项目名称</label>
                            <input type="text" placeholder="请输入项目名称">
                        </div>
                        <div class="mt32">
                            <label>当前职位</label>
                            <input type="text" placeholder="请输入当前职位">
                        </div>
                        <div class="mt32">
                            <label>最高学历</label>
                            <el-select v-model="form.education">
                                <el-option v-for="item in educations" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="mt32">
                            <label>职称</label>
                            <input type="text" placeholder="请输入职称">
                        </div>
                        <div class="mt32">
                            <label>职业资格证</label>
                            <input type="text" placeholder="请输入职业资格证">
                        </div>
                        <div class="submit">
                            <button class="blue" @submit.prevent="onSubmit" type="submit">提交</button><button type="button" class="cancel-button" @click="cancle">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
</template>

<script>
let img = require('../../assets/image/user_img.png');
import { getImgPath } from '@/tool/getimgpath.js'

export default {
    name: "edit-user",
    data() {
        return {
            src: img,
            show_img: false,
            years: [
                1999,
                2000,
                2001,
                2002,
                2003,
                2004,
                2005,
                2006,
                2007,
                2008,
                2009,
                2010,
                1011,
                2012,
                2013,
                2014,
                2015,
                2016,
                2017,
                2018
            ],
            months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            educations: ['高中', '大专', '本科', '硕士', '博士', '教授'],
            form: {
                name: '马天夏',
                username: '',
                gender: 1,
                year: 1999,
                month: 10,
                phone: 13480752874,
                email: '13480752874@163.com',
                department: '',
                role: '',
                education: undefined,
                jobtitle: undefined,
                certificate: undefined
            }
        };
    },
    methods: {
        editImg() {
            document.getElementById('up-img').click();
        },
        onSubmit(ev) {
            this.$message({
                message: '提交成功!',
                type: 'success'
            })
        },
        cancle() {
            this.$message({
                type: 'warning',
                message: '已取消!'
            })
            this.src = img;
        },
        changeImg(ev) {
            this.src = getImgPath(ev.target.files[0]);
        }
    }
};
</script>

<style scoped>
@import "../../assets/css/person.css";
.left {
    margin-top: 20px;
    display: inline-block;
}

.left  img {
    width: 120px;
    height: 120px;
}

.left > .img-block:hover {
    opacity: 0.4;
}
.layout {
    width: 120px;
    height: 120px;
    opacity:0.4;
    background:#000000;
    color: #ffffff;
    text-align: center;
    line-height: 120px;
    position: relative;
    top: -124px;
}

.right {
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
    margin-left: 48px;
}

.right label {
    display: inline-block;
    width: 70px;
    font-size: 14px;
    color:#6f83a1;
}

.right > form > div > input {
    width: 200px;
    height: 32px;
    border:1px solid #d3d9e2;
    border-radius:2px;
    outline: none;
    padding-left: 16px;
    font-style: 14px;
    /* margin-bottom: 32px; */
}

.right .year, .right .month {
    width: 160px;
}

.right .month {
    margin-left: 10px;
}

.submit {
    margin-top: 56px;
}
</style>
